<template>
	<view class="page">
		<view class="selectbox">
			<view class="selectplus">
				<view class="s1 flex" @click="show = true">
					{{date || '日期选择'}} <u-icon name="arrow-down-fill" color="#AAA" size="12"></u-icon>
				</view>
				
				<view class="s1 flex" @click="show2 = true">
					{{typeinfo.name}}  <u-icon name="arrow-down-fill" color="#AAA" size="12"></u-icon>
				</view>
			</view>
			
			<integralList v-model="list" :integralType="3"/>
			<no-data v-if="list.length==0" title="暂无账单记录"/>
			
			<u-action-sheet :actions="selectlist" @select="selectClick" @close='show2=false'
			:show="show2" cancelText="取消"></u-action-sheet> 
			<u-datetime-picker :show="show" mode="year-month" @confirm="onSelect" :closeOnClickOverlay="true"
			@cancel="show=false" v-model="defaultValue" :minDate="minDate" :maxDate="maxDate"></u-datetime-picker>
		</view>
	</view>
	
</template>

<script>
	import {wxbillAPI} from "@/api/user.js"
	import integralList from "../my/components/integral-list.vue"
	import {DateFormatter} from "@/utils/dateFormat.js"
	import pageing from "@/mixins/pageing.js"
	export default {
		mixins:[pageing],
		components:{
			integralList
		},
		data() {
			return {
				wallet:{
					balance:"",
					freezeBalance:"",
					giveBalance:"",
					giveFreezeBalance:"",
				},
				list:[],
				show:false,
				show2:false,
				typeinfo:{
					id:"",
					name:'全部'
				},
				date:'',
				selectlist: [
					{	
						id:"",
						name:'全部'
					},{
						id:"1",
						name: '增加记录'
					},{
						id:"2",
						name: '减少记录'
					}
				],
				defaultValue: null,
				minDate:Number(new Date((new Date().getFullYear() - 5)+"-"+new Date().getMonth())),
				maxDate: Number(new Date())
			}
		},
		created() {
			this.defaultValue = this.getDefaultValue();
			this.getlist()
		},
		methods: {
			getDefaultValue() {
				const now = new Date();
				return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
			},
			getlist(){
				wxbillAPI({
					"pageNo": this.pageNo,
					"pageSize":  this.pageSize ,
					createTime:this.date,
					type:this.typeinfo.id
				}).then(res=>{
					this.total=res.total
					this.list=this.list.concat(res.list)
				})
			},
			onSelect({value}){
				this.date=DateFormatter.formatYearMonth(value)
				this.show=!this.show
				this.pageNo=1
				this.list=[]
				this.getlist()
 			},
			selectClick(val){
				this.typeinfo=val
				this.pageNo=1 
				this.list=[]
				this.getlist()
			},
		}
	}
</script>

<style lang="scss" scoped>
.page{
	background-color: #F8F8F8;
} 
.selectbox{
	background-color: #FFFFFF;
	margin-top: 30rpx;
	border-radius: 20rpx 20rpx 0 0;
}
.selectplus{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx;
	border-bottom: #EEEEEE 1px solid;
	 
	view{
		font-size: 28rpx;
		color: #666666;
	}
}
</style>
